<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>new Date(dateStr) Compatibility Test</title>
	<style>
		body
		{
			font-family: arial;
		}
		table th
		{
			text-align: left;
		}
		.support
		{
			background-color: #5cb85c;
		}
		.not-correct
		{
			background-color: #f0ad4e;
		}
		.not-support
		{
			background-color: #ac2925;
		}
		.iso8601
		{
			font-weight: bold;
		}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script>
		// [dateformat sample, ISO 8601 or not, correct time zone, date value for comparision]
		var strArr = [
			["2016-06-01", true, 'GMT', "2016-06-01T00:00:00+00:00"],
			["2016-06-01T11:12:30+00:00", true, 'GMT', "2016-06-01T11:12:30+00:00"],
			["2016-06-01T11:12:30Z", true, 'GMT', "2016-06-01T11:12:30+00:00"],	// Solr
			["2016-06-01T11:12:30.00+00:00", true, 'GMT', "2016-06-01T11:12:30+00:00"],
			["2016-06-01T11:12:30.00Z", true, 'GMT', "2016-06-01T11:12:30+00:00"],
			["2016-06-01T11:12:30.000", false, 'Local', "2016-06-01T11:12:30+00:00"],	// NeuLion App Server
			["2016-06-01 11:12:30", false, 'Local', "2016-06-01T11:12:30+00:00"],
			["2016-06-01T11:12:30", false, 'Local', "2016-06-01T11:12:30+00:00"],
			["2016/06/01", false, 'Local', "2016-06-01T00:00:00+00:00"],
			["2016/06/01 11:12:30", false, 'Local', "2016-06-01T11:12:30+00:00"],
			["2016/06/01T11:12:30", false, 'Local', "2016-06-01T11:12:30+00:00"],
			["Jun 1, 2016", false, 'Local', "2016-06-01T00:00:00+00:00"],
			["Mon, 25 Dec 1995 13:30:00 GMT", false, 'GMT', "1995-12-25T13:30:00+00:00"],
			["Sat Feb 10 15:04:56 +0000 2018", false, 'GMT', "2018-02-10T15:04:56+00:00"]	// Twitter
		];
		$(document).ready(function(){
			$("#userAgent").text(navigator.userAgent);
			// Test
			var $testTable = $("#testTable");
			for (var i = 0; i < strArr.length; i++)
			{
				var date = new Date(strArr[i][0]);
				var support = date != "Invalid Date";
				var correct = false;
				if (support)
				{
					switch(strArr[i][2])
					{
						case "Local":
							if (date.getTime() - new Date().getTimezoneOffset() * 60 * 1000 == new Date(strArr[i][3]).getTime())
							{
								correct = true;
							}
							break;
						case "GMT":
							if (date.getTime() == new Date(strArr[i][3]).getTime())
							{
								correct = true;
							}
							break;
					}
				}
				$testTable.append('<tr><td class="' + (strArr[i][1] ? 'iso8601' : '') + '" title="' + (strArr[i][1] ? 'ISO 8601' : '') + '">' + strArr[i][0] + " [" + strArr[i][2] + "]" + '</td><td class="' + (support ? correct ? "support" : "not-correct" : "not-support") + '">&nbsp;</td></tr>');
			}
			
			// Report
			var result = [
				{
					"name": "Chrome 63",
					"testCase": [2,2,2,2,2,2,2,2,2,2,0,2,2,2]
				},
				{
					"name": "Firefox 58",
					"testCase": [2,2,2,2,2,2,2,2,2,2,0,2,2,2]
				},
				{
					"name": "IE Edge",
					"testCase": [2,2,2,2,2,2,2,2,2,2,1,2,2,2]	// '2016/06/01T11:12:30' will have one hour plus...
				},
				{
					"name": "IE 11",
					"testCase": [2,2,2,2,2,2,0,2,2,2,1,2,2,0]
				},
				{
					"name": "IE 10",
					"testCase": [2,2,2,2,2,2,0,2,2,2,1,2,2,0]
				},
				{
					"name": "IE 9",
					"testCase": [2,2,2,2,2,1,0,1,2,2,1,2,2,0]
				},
				{
					"name": "Opera 51",
					"testCase": [2,2,2,2,2,2,2,2,2,2,0,2,2,2]
				},
				{
					"name": "Sougou 7.5.5",
					"testCase": [2,2,2,2,2,1,2,1,2,2,0,2,2,2]
				},
				{
					"name": "Safari 11.0.3 on macOS (Sierra 10.12.6)",
					"testCase": [2,2,2,2,2,1,0,1,2,2,0,2,2,2]
				},
				{
					"name": "Safari 9.1.2 on OS X (Yosemite 10.10.5)",
					"testCase": [2,2,2,2,2,1,0,1,2,2,0,2,2,2]
				},
				{
					"name": "Chrome(64) on macOS",
					"testCase": [2,2,2,2,2,2,2,2,2,2,0,2,2,2]
				},
				{
					"name": "Safari on iOS(11.2.2)",
					"testCase": [2,2,2,2,2,1,0,1,2,2,0,2,2,2]
				},
				{
					"name": "Chrome(64) on iOS(11.2.2)",
					"testCase": [2,2,2,2,2,1,0,1,2,2,0,2,2,2]
				},
				{
					"name": "Chrome(58) on Nexus (Android 7.1.1)",
					"testCase": [2,2,2,2,2,2,2,2,2,2,0,2,2,2]
				},
				{
					"name": "XiaoMi (Android)",
					"testCase": [2,2,2,2,2,1,2,1,2,2,0,2,2,2]
				}
			];
			var $reportTable = $("#reportTable");
			var label = "";
			for (var i = 0; i < result.length; i++)
			{
				label += '<th>' + result[i].name + '</th>';
			}
			$reportTable.find("tr").append(label);

			for (var i = 0; i < strArr.length; i++)
			{
				var row = '<tr><td class="' + (strArr[i][1] ? 'iso8601' : '') + '" title="' + (strArr[i][1] ? 'ISO 8601' : '') + '">' + strArr[i][0] + " [" + strArr[i][2] + "]" + '</td>';
				for (var j = 0; j < result.length; j++)
				{
					row += '<td class="' + (result[j].testCase[i] == 2 ? "support" : result[j].testCase[i] == 1 ? "not-correct" : "not-support") + '">&nbsp;</td>';
				}
				row += '</td>';
				$reportTable.append(row);
			}
		});
	</script>
</head>
<body>
<h1>Javascript: new Date(dateStr) Browser Compatibility Test</h1>
<table border="1">
	<tr><td class="support">Supported</td></tr>
	<tr><td class="not-correct">Supported but timezone doesn't match</td></tr>
	<tr><td class="not-support">Not supported</td></tr>
</table>
<h2>Your Browser: <span id="userAgent"></span></h2>
<table id="testTable" border="1">
	<tr><th>Date Str</th><th>Result</th></tr>
</table>
<h2>Browser Compatible:</h2>
<table id="reportTable" border="1">
	<tr><th>dateStr</th></tr>
</table>
</body>
</html>